<template>
    <section class="datadb_form">
  		<el-form ref="form" :model="datadbForm" label-width="106px" class="second_form">
			<el-form-item label="数据源名称">
			   	<el-select filterable  v-model="form.inServiceDataSource.connDatasourceId"  placeholder="请选择">
					<el-option
						v-for="item in FTPData"
						:key="item.id"
						:label="item.name"
						:value="item.id">
					</el-option>
			  	</el-select>
			  	<i class="el-icon-circle-plus-outline icon_diy"  @click="addDataOragin"></i>
			</el-form-item>
					
			<el-radio v-model="sqLradio" label="1">查询的视图/单表名称</el-radio>
				<el-radio v-model="sqLradio" label="2">自定义SQL语句</el-radio>
				<p style="margin: 10px;"></p>
			<el-input  placeholder="输入自定义SQL语句" v-model="datadbForm.sql" v-show="sqLradio==='2'"></el-input>
			<!-- <el-input  @keyup.native="replace()" placeholder="输入视图名或单表名" v-model="datadbForm.formName"  v-show="sqLradio==='1'"></el-input> -->
			<el-form-item label="选择表名" v-show="sqLradio==='1'" >
                <el-select placeholder="请选择" v-model="zhiDuanName">
                    <el-option
                        v-for="item in DatabaseTableData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    	>
                    </el-option>
                </el-select>
            </el-form-item>	

			<el-form-item label="数据匹配" style="margin-bottom: 0px;"></el-form-item>

			<el-table
				:data="dataPiPeiTableData"
				style="width: 100%;"
				>
				<el-table-column
					align="center"
					label="字段名"
					>
					<template slot-scope="scope">
						<el-input v-model="scope.row.tickName" placeholder=""></el-input>
					</template>
				</el-table-column>	
			
				<el-table-column
					align="center"
					label="中文名"
					>
					<template slot-scope="scope">
						<el-input v-model="scope.row.chineseName" placeholder=""></el-input>
					</template>
				</el-table-column>	
									
				<el-table-column
					align="center"
					label="对应元数据"
					>
					<template slot-scope="scope">
						<el-select v-model="scope.row.yuanData" placeholder="请选择" style="width: 160px;">
							<el-option
								v-for="item in wenjianFormYuanDataOptions"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
					
				<el-table-column
					align="center"
					label=""
					>
					<template slot-scope="scope">
						<i class="el-icon-delete" @click="delFormData1(scope)"></i>
					</template>
				</el-table-column>		
			</el-table>
						
			<el-button type="primary" style="margin-top: 15px;" @click="adddataPiPeiTableData">添加</el-button>
						
			<!--tabs页标签-->	
			<el-tabs v-model="activeName2" type="border-card" style="margin-top: 20px;">
				<el-tab-pane  name="first">
					<span slot="label">
						<el-checkbox v-model="checked1"></el-checkbox>
						返回接口
					</span>
					<el-form-item label="请求参数"></el-form-item>
					
					<out-put-table :backJieKouTableData="backJieKouTableData" 
						:wenjianFormTable1Data ="dataPiPeiTableData"
						:wenjianFormYuanDataOptions="wenjianFormYuanDataOptions3"
						:outPutTabletimeOut = "outPutTabletimeOut"
						@outPutTableData="outPutTableData1"
						:sqlTimeOut = "sqlTimeOutjiekou"
						@outPutSql = "outPutSqlJiekou"
						>
					</out-put-table>
						
					<el-button type="primary" size="small" style="margin: 15px;" @click="addbackJiekouTableData">添加参数</el-button>
				
					<el-form-item label="返回数据">
						<el-checkbox-group v-model="datadbForm.backData">
							<el-checkbox-button disabled 
								class="box_checkbox" 
								v-for="item in dataPiPeiTableData" 
								:label="item.chineseName" 
								:key="item.name">{{item.chineseName}}</el-checkbox-button>
						</el-checkbox-group>
					</el-form-item>
				
					<p style="margin: 10px 0 ;text-align: right;">
						<el-button type="primary" size="small" @click="getSQL('jiekou')">查看sql语句</el-button>	
					</p>
				</el-tab-pane>
				
				<el-tab-pane name="second">
					<span slot="label">
						<el-checkbox v-model="checked2"></el-checkbox>
						返回文件
					</span>
					<el-form-item label="请求参数"></el-form-item>
					
					<out-put-table :backJieKouTableData="backWenJianTableData" 
						:wenjianFormTable1Data ="dataPiPeiTableData"
						:outPutTabletimeOut = "outPutTabletimeOut2"
						@outPutTableData="outPutTableData2"
						:sqlTimeOut = "sqlTimeOutwenjian"
						@outPutSql = "outPutSqlWenjian"
						:wenjianFormYuanDataOptions="wenjianFormYuanDataOptions3"
						>
					</out-put-table>
					
					<el-button type="primary" size="small" style="margin: 15px;"  @click="addbackWenJianTableData">添加参数</el-button>
					
					<el-form-item label="返回文件地址 ">
						<el-radio-group v-model="datadbForm.backAdress">
							<el-radio class="box_checkbox" label="1" >通用地址</el-radio>
							<el-radio class="box_checkbox" label="2" >请求参数指定地址</el-radio>
						</el-radio-group>
						<el-input v-model="datadbForm.backAdressInput"  v-show="datadbForm.backAdress==='1'" placeholder=""></el-input>
					</el-form-item>
						
					<p style="margin: 10px 0 ;text-align: right;">
						<el-button type="primary" size="small" @click="getSQL('wenjian')">查看sql语句</el-button>	
					</p>
				</el-tab-pane>
			</el-tabs>
			<!--tabs页标签-->
    	</el-form>
    	<!-- 直接修改即可,现在改为只能查看 -->	
    	<el-dialog
			title="sql语句"
			:modal=false
			:visible.sync="SQLdialogVisibleWenjian"
			width="30%"
			>
		  	<el-input type="textarea"  v-model="createdSqlwenjian" :disabled="true" ></el-input>
		</el-dialog>
		
		<el-dialog
			title="sql语句"
			:visible.sync="SQLdialogVisibleJiekou"
			:modal=false
			width="30%"
			>
			<el-input type="textarea"  v-model="createdSqlJiekou" :disabled="true" ></el-input>
		</el-dialog>
        
        <el-dialog
            :title="titleDiy"
            :visible.sync="dialogVisible2"
            width="50%"
            class="diy-dialog"
            :append-to-body=true
			>
            <form-origin 
                :type="dialog1Type" 
                :content = "currentPage" 
                :formData="formData" 
                :formLabel="formLabel"
                @insertData = "insertDataOrigin"
                @emitSelectWangduan = "emitSelectWangduan"
                @closeForm="closeForm"
            	>
			</form-origin>
		</el-dialog>
    </section>
</template>

<script>
    import elTabDiy from "../../common/elTab"
    import formOrigin from '@/views/fuwuServer/components/formOrigin'
    import outPutTable from "./outPutTable"
    import {
    	componentGetYuanData2Type,
    	componentGetYuanData2Type3,
    	componentGetFTPData,
    	findIndexExport,
    	computedConnDataAdd,
        computedGetTable,
        computedGetValue,
    } from "../../common/js_css_img/serverResourceComputed"
    import {
    	componentAddYuanData,
    	componentConnDataAdd,
    	componentGetArea,
    	componentSelectAll,
    	componentGetType
    } from "@/views/fuwuServer/components/computedFuwuServer"
    export default {
    	components:{
    		elTabDiy,
    		outPutTable,
    		formOrigin
    	},
    	props:{
    		timeSubmit :Boolean,
    		resourceWeb:Number,
    		HasDataForm:{
    			type:Object,
    			default:function  () {
    				return {}
    			}
    		}
    	},
        data() {
          return {
			dataOriginId:'',
			detailData:{},
			currentPage:'dataOrigin',
			updataId :0,
			titleDiy:'',
			dialog1Type:'',
			dialogVisible2:false,
			dialogVisible1:false,
          	formLabel:[
		        	{
		        		show:'normal',
		        		label:'数据源名称',
		        		placehold:'50个字以内',
		        		type:'input',
		        		modelData:"name"
		        	},
		        	{
		        		show:'normal',
		        		label:'所属网段 ',
		        		placehold:'',
		        		type:'select',
		        		options:[],
		        		modelData:'segmentId'
		        	},
		        	{
		        		show:'normal',
		        		label:'所属区域',
		        		placehold:'',
		        		type:'select',
		        		options:[],
		        		modelData:'areaId'
		        	},
		        	{
		        		show:'normal',
		        		label:'类型',
		        		placehold:'',
		        		type:'select',
		        		options:[
		        			{
		        				name:"数据库",
		        				id:3
		        			},
		        			{
		        				name:"ftp",
		        				id:2
		        			}
		        		],
		        		modelData:'typeId'
		        	},
		        	{
		        		show:'db',
		        		label:'数据库类型',
		        		placehold:'',
		        		type:'select',
		        		options:[],
		        		modelData:'libraryTypeId'
		        	},
					{
		        		show:'ftp',
		        		label:'主机IP地址 ',
		        		placehold:'',
		        		type:'input',
		        		modelData:'address'
		        	},
		        	{
		        		show:'ftp',
		        		label:'文件目录',
		        		placehold:'',
		        		type:'input',
		        		modelData:'filePath'
		        	},
		        	{
		        		show:'ftp',
		        		label:'端口号',
		        		placehold:'',
		        		type:'input',
		        		modelData:'port'
		        	},
		        	{
		        		show:'db',
		        		label:'数据库地址',
		        		placehold:'',
		        		type:'input',
		        		modelData:'address'
		        	},
		        	{
		        		show:'db',
		        		label:'数据库名称',
		        		placehold:'',
		        		type:'input',
		        		modelData:'dataBaseName'
		        	},
		        	{
		        		show:'normal',
		        		label:'用户名',
		        		placehold:'数据用户名',
		        		type:'input',
		        		modelData:'username'
		        	},
		        	{
		        		show:'normal',
		        		label:'密码',
		        		placehold:'',
		        		type:'input',
		        		modelData:'password'
		        	},
		        	{
		        		show:'normal',
		        		label:'描述',
		        		placehold:'',
		        		type:'textarea',	
		        		modelData:'describe'
		        	},
		   	],
          	formData:[
		        	{
		        		label:'数据源名称',
		        		value:'',
		        	},
		        	{
		        		label:'类型',
		        		value:'',
		        	},
		        	{
		        		label:'所属区域',
		        		value:'',
		        	},
		        	{
		        		label:'数据库类型',
		        		value:'',
		        	},
		        	{
		        		label:'数据库版本',
		        		value:'',
		        	},
		        	{
		        		label:'数据库地址',
		        		value:'',
		        	},
		        	{
		        		label:'数据库名称',
		        		value:'',
		        	},
		        	{
		        		label:'描述',
		        		value:'',
		        	},
		        	{
		        		label:'测试结果',
		        		value:'',
		        	},
		    ],
          	sqlTimeOutwenjian:false,
          	sqlTimeOutjiekou:false,
          	createdSqlwenjian:'',
          	createdSqlJiekou:'',
          	SQLdialogVisibleWenjian:false,
          	SQLdialogVisibleJiekou:false,
          	sqLradio:'1',
          	checked1:true,
          	checked2:false,
          	outPutTabletimeOut:false,
          	outPutTabletimeOut2:false,
          	activeName2:'first',
          	checkRule:["","=","<",">","<=",">="],
          	form:{
	          	inServiceDataSource:{  //数据来源
					"type":3, //实时接口类型2;//文件类型3;//数据库类型
					"connDatasourceId":'',   //FTP数据源
					"sql":'',
					"outputDataFormList":[ //数据匹配
						
					],
				},
				outServiceDataSourceList:[//返回接口/返回文件
					
				],
          	},
          	datadbForm:{
          		dataOriginName:'',
          		backData:[],
				wenjianType:[],
				backAdress:'',
				backAdressInput:'',
				sql:'',
				formName:'',
          	},
          	FTPData:[
          		
          	],
          	dataPiPeiTableData:[
          		
          	],
          	backJieKouTableData:[/*返回接口的表格*/
          			
          	],
          	backWenJianTableData:[/*返回文件的表格*/
          		
          	],
          	backData:[
          			
          	],
          	wenjianFormYuanDataOptions:[
          		
          	],
          	wenjianFormYuanDataOptions3:[
          		
          	],
          	wenjianType:[
          		{
          			label:'XML',
          			name:'XML'
          		},
          		{
          			label:'CSV',
          			name:'CSV'
          		},
          		{
          			label:'JSON',
          			name:'JSON'
          		},
          		{
          			label:'TXT',
          			name:'TXT'
          		}
          	],
          	wenjianFormTable1Data:[],
          	wenjianFormYuanDataOptions:[],
            DatabaseTableData: [],
            zhiDuanName: '',
          	};
          
        },
        methods: {
			replace(){
				this.datadbForm.formName =this.datadbForm.formName.replace(/[^a-z|^A-Z]/,'');/*限制一个单词*/
			},
			delFormData1(scope){
				this.dataPiPeiTableData.splice(scope.$index,1);
			},
			emitSelectWangduan(val){
				componentGetArea(this,{segment:val});
			},
			insertDataOrigin(val){/*插入到数据库*/
				console.log(val);
				computedConnDataAdd(this,val);
			},
			closeForm(){
				this.dialogVisible2 = false;
			},
			addDataOragin(){/*新增数据源*/
				this.dataOriginId = 0;
				this.titleDiy = '新增数据源'
				this.dialog1Type = 'add';
				this.dialogVisible2 = true;
			},
			outPutTableData(val){
				console.log(val);
			},
			adddataPiPeiTableData(yuanDataName){
				if(typeof yuanDataName == 'object'){
					yuanDataName = '';
				}
				this.dataPiPeiTableData.push(
					{
						yuanData: '',
						chineseName:'',
						tickName: yuanDataName,
					}
				)
        	},
        	addbackJiekouTableData(){
        		this.backJieKouTableData.push(
        			{
          				canshuName:"",
          				checkRule:'',
          				yuanData:'',
          				isHas:false,
          				isCheck:false,
          			}
        		)
        	},
        	addbackWenJianTableData(){
        		this.backWenJianTableData.push(
        			{
          				canshuName:"",
          				checkRule:'',
          				yuanData:'',
          				isHas:false,
          				isCheck:false,
          			}
        		)
        	},
        	getSQL(val){/*弹出sql语句*/
        		if(val==="wenjian"){
        			this.SQLdialogVisibleWenjian=true;
        			this.sqlTimeOutwenjian=!this.sqlTimeOutwenjian;
        		}else if(val){
        			this.SQLdialogVisibleJiekou=true;
        			this.sqlTimeOutjiekou=!this.sqlTimeOutjiekou;
        		}
        	},
        	outPutSql(){/*输出给后台*/
        		if(this.checked1){
        			this.sqlTimeOutjiekou=!this.sqlTimeOutjiekou;
        		}
        		if(this.checked2){
        			this.sqlTimeOutwenjian=!this.sqlTimeOutwenjian;
        		}
        	},
        	outPutSqlWenjian(val){
        		this.createdSqlwenjian = this.dealSQL(val);
        	},
        	outPutSqlJiekou(val){
        		this.createdSqlJiekou = this.dealSQL(val);
        	},
        	dealSQL(val){/*处理sql*/
        		let tiaojianCanshu ='';
        		let chaxunCanshu="";
        		let sql = '';
        		let sqlhou='';
        		for (let i in val){
        				if(val[i].checkRule===7){
        					 tiaojianCanshu +=' AND '+this.dataPiPeiTableData[val[i].canshuName].tickName+' LIKE '+ "\'#{"+this.dataPiPeiTableData[val[i].canshuName].tickName+"}%\'";
        				}else if(val[i].checkRule===8){
        					 tiaojianCanshu +=' AND '+this.dataPiPeiTableData[val[i].canshuName].tickName+' LIKE '+ "\'%#{"+this.dataPiPeiTableData[val[i].canshuName].tickName+"}%\'";
        				}else if(val[i].checkRule===6){
        					 tiaojianCanshu +=' AND '+this.dataPiPeiTableData[val[i].canshuName].tickName+' LIKE '+ "\'%#{"+this.dataPiPeiTableData[val[i].canshuName].tickName+"}\'";
        				}else{
        					tiaojianCanshu +=' AND '+this.dataPiPeiTableData[val[i].canshuName].tickName+' '+ this.checkRule[val[i].checkRule] + "\'#{"+this.dataPiPeiTableData[val[i].canshuName].tickName+"}\'";
        				}
        		}
        		tiaojianCanshu = tiaojianCanshu.substr(5);
        		for (let v in this.dataPiPeiTableData){
        			if(v==this.dataPiPeiTableData.length-1){
        				chaxunCanshu+=this.dataPiPeiTableData[v].tickName;
        			}else{
        				chaxunCanshu+=this.dataPiPeiTableData[v].tickName+','
        			}
        		}
				console.log(chaxunCanshu);
        		console.log(tiaojianCanshu);
        		if(this.sqLradio==="1"){
        			sql = "select " + chaxunCanshu +" from " + this.datadbForm.formName ;  //秀东说不要加后面的+ " where " +tiaojianCanshu
        			sqlhou="select " + chaxunCanshu +" from " + this.datadbForm.formName;
        		}else if(this.sqLradio==="2"){
        			sql = "select " + "web_tmp__."+chaxunCanshu +" from " +'(' +this.datadbForm.sql +')'+' web_tmp__ '; //秀东说不要加后面的+ " where " +tiaojianCanshu
        			sqlhou="select " + "web_tmp__."+chaxunCanshu +" from " + '(' +this.datadbForm.sql+') web_tmp__';
        		}
        		this.form.inServiceDataSource.sql = sqlhou;
        		return sql;
        	},
        	outPutTableData1(val){/*处理第一个tab*/
        		let  inputDataFormList =[];
        		for (let i in val){
        			inputDataFormList.push(
        				{
        					"key" :this.dataPiPeiTableData[val[i].canshuName].tickName,
        					"name" :  this.dataPiPeiTableData[val[i].canshuName].chineseName,
        					"metaDataId":val[i].yuanData,
        					"position" :Number(i)+1,
        					"opRule" :val[i].checkRule,
        					"isValid" :val[i].isCheck===""?0:1,
        					"isNecessary" :val[i].isHas===""?0:1,
        				}
        			)
        		}
        		this.form.outServiceDataSourceList =[];
        		this.form.outServiceDataSourceList.push(
        			{
        				"type":"1", //返回接口2;//返回文件（注意，当数据来源是接口时这个type也要传，传1）
						"filePath" :''
						,"inputDataFormList":inputDataFormList
        			}
        		)
        		console.log(this.form);
				this.checkForm();
        	},
        	outPutTableData2(val){/*处理第二个tab*/
        		let  inputDataFormList =[];
        		for (let i in val){
        			inputDataFormList.push(
        				{
        					"key" :this.dataPiPeiTableData[val[i].canshuName].tickName,
        					"name" :  this.dataPiPeiTableData[val[i].canshuName].chineseName,
        					"metaDataId":val[i].yuanData,
        					"position" :Number(i)+1,
        					"opRule" :val[i].checkRule,
        					"isValid" :val[i].isCheck===""?0:1,
        					"isNecessary" :val[i].isHas===""?0:1,
        				}
        			)
        		}
        		
        		if(!this.checked1){
        			this.form.outServiceDataSourceList=[];
        		}
        		this.form.outServiceDataSourceList.push(
        			{
        				"type":"2", //返回接口2;//返回文件（注意，当数据来源是接口时这个type也要传，传1）
						"filePath" :this.datadbForm.backAdressInput
						,"inputDataFormList":inputDataFormList
        			}
        		)
        		console.log(this.form);
				this.checkForm();
        	},
        	checkForm(){/*校验这个文件表单*/
        		this.outPutSql();
        		console.log(this.form);
        		if(this.checked1&&this.checked2&&this.form.outServiceDataSourceList.length==2){
        			this.$emit("outPutForm",this.form);
        		}else if ((this.checked1!=this.checked2)&&this.form.outServiceDataSourceList.length==1){
        			this.$emit("outPutForm",this.form);
        		}else{
        			return;
        		}
        	}
        },
        mounted(){
			componentGetYuanData2Type(this,{"pageAble":false},2);/*获取共享返回类的元数据*/
			componentGetYuanData2Type3(this,{"pageAble":false},2);/*获取共享请求类的元数据*/
			componentSelectAll(this);/*获取网段*/
			componentGetType(this, "db_type");/*获取数据库类型*/
        },
        watch:{
        	resourceWeb(newVal){
        		componentGetFTPData(this,3,newVal);/*数据源选择*/
                console.log(newVal);
        	},
        	timeSubmit(newVal){
        		this.form.inServiceDataSource.outputDataFormList=[];
        		for (let i in this.dataPiPeiTableData){
        			this.form.inServiceDataSource.outputDataFormList.push(
        				{
        					"key":this.dataPiPeiTableData[i].tickName
							,"name":this.dataPiPeiTableData[i].chineseName
							,"metaDataId":this.dataPiPeiTableData[i].yuanData
							,"position":Number(i)+1
        				}
        			)
        		}
        		
        		if(this.checked1){/*勾选了第一个tab*/
        			this.outPutTabletimeOut=!this.outPutTabletimeOut;
        		}
        		if(this.checked2){/*勾选了第二个*/
        			this.outPutTabletimeOut2=!this.outPutTabletimeOut2;
        		}
        	},
        	HasDataForm:{
        		handler(newVal,oldVal){
        			this.form.inServiceDataSource.connDatasourceId = newVal.inServiceDataSource.connDatasourceId;
        			if(newVal.inServiceDataSource.sql.indexOf('form')==-1){
        				this.datadbForm.sql = newVal.inServiceDataSource.sql;
        			}else{
        				this.datadbForm.formName = newVal.inServiceDataSource.sql
        			}
        			for(let i in newVal.inServiceDataSource.outputDataFormList){
        				this.dataPiPeiTableData.push(
        					{
        						tickName:newVal.inServiceDataSource.outputDataFormList[i].key,
          						chineseName:newVal.inServiceDataSource.outputDataFormList[i].name,
          						yuanData:newVal.inServiceDataSource.outputDataFormList[i].metaDataId,
          					}
        				)
        			}
        			
        			for(let k in newVal.outServiceDataSourceList){
        				if(newVal.outServiceDataSourceList[k].type==2){/*2是文件*/
        					this.checked2=true;
        					for(let j in newVal.outServiceDataSourceList[k].inputDataFormList){
        						 this.backWenJianTableData.push(
        						 	{
        						 		canshuName:findIndexExport(this.dataPiPeiTableData,newVal.outServiceDataSourceList[k].inputDataFormList[j].name),
				          				checkRule:newVal.outServiceDataSourceList[k].inputDataFormList[j].opRule,
				          				yuanData:newVal.outServiceDataSourceList[k].inputDataFormList[j].metaDataId,
				          				isHas:newVal.outServiceDataSourceList[k].inputDataFormList[j].isNecessary,
				          				isCheck:newVal.outServiceDataSourceList[k].inputDataFormList[j].isValid,
        						 	}
        						 )
        					}
        				}else if(newVal.outServiceDataSourceList[k].type==1){/*1是接口*/
        					this.checked1=true;
        					for(let j in newVal.outServiceDataSourceList[k].inputDataFormList){
        						 this.backJieKouTableData.push(
        						 	{
        						 		canshuName:findIndexExport(this.dataPiPeiTableData,newVal.outServiceDataSourceList[k].inputDataFormList[j].name),
				          				checkRule:newVal.outServiceDataSourceList[k].inputDataFormList[j].opRule,
				          				yuanData:newVal.outServiceDataSourceList[k].inputDataFormList[j].metaDataId,
				          				isHas:newVal.outServiceDataSourceList[k].inputDataFormList[j].isNecessary,
				          				isCheck:newVal.outServiceDataSourceList[k].inputDataFormList[j].isValid,
        						 	}
        						 )
        					}
        				}
        			}
        		},
        		deep:true
        	},
            form: {
                handler(newVal,oldVal){
                    //数据库查询表操作
                    computedGetTable(this,newVal.inServiceDataSource.connDatasourceId);
                },
                deep: true
            },
            zhiDuanName(newVal){
                //数据库查询表字段操作
                this.dataPiPeiTableData = []
                console.log(newVal);
                computedGetValue(this,newVal);
            },
            sqLradio(newVal){   //选择了自定义SQL语句，清空字段
                if(newVal==2){
                    this.dataPiPeiTableData = [];
                }
            }
        },
  	};
</script>

<style scoped="scoped">
	.datadb_form .icon_diy{
		font-size: 20px;
		vertical-align: middle;
	}
	
	div#tab-first{
		 text-align: right !important;
	     padding-right: unset !important; 
	     margin-left: unset !important; 
	}
	
	.diy_label{
		text-align: right;
	    vertical-align: middle;
	    float: left;
	    font-size: 14px;
	    color: #606266;
	    line-height: 40px;
	    padding: 0 12px 0 0;
	    box-sizing: border-box;
	}
	

</style>